<template>
    <div class="common-layout">
        <el-container>
            <!--            <el-image style="width: auto; height: auto" src="/img/header.png" fit="contain"/>-->
            <img style="width: auto; height: auto" src="/img/header.png" fit="contain"/>
            <el-header>
                ..
                <Menu @change-content="(v) => state.content=v"/>
            </el-header>
            <el-main>
                <div v-if="state.content==='index'">
                    <!-- 轮播图 -->
                    <Carousel/>
                    <Card style="padding-top: 10px"/>
                </div>
                <div>
                    <IndoorTemperatureAndHumidity v-if="state.content==='IndoorTemperatureAndHumidity'"/>
                    <SoilTemperatureAndHumidity v-if="state.content==='SoilTemperatureAndHumidity'"/>
                    <Light v-if="state.content==='Light'"/>
                    <CarbonDioxide v-if="state.content==='CarbonDioxide'"/>
                    <BladeTemperatureAndHumidity v-if="state.content==='BladeTemperatureAndHumidity'"/>
                    <RainFall v-if="state.content==='RainFall'"/>
                    <WindSpeedAndDirection v-if="state.content==='WindSpeed'"/>
                    <Conductivity v-if="state.content==='Conductivity'"/>
                    <PH v-if="state.content==='PH'"/>
                    <NitrogenContent v-if="state.content==='NitrogenContent'"/>
                    <PhosphorusContent v-if="state.content==='PhosphorusContent'"/>
                    <PotassiumContent v-if="state.content==='PotassiumContent'"/>
                </div>
                <div v-if="state.content==='monitor'">
                    <CameraPreview/>
                </div>
                <div v-if="state.content==='manage'">
                    <CloudManage/>
                </div>
                <div v-if="state.content==='task'">
                    <TaskManage/>
                </div>
                <div v-if="state.content==='aboutUs'">
                    <aboutUs/>
                </div>
            </el-main>
            <el-footer>
                Footer
            </el-footer>
        </el-container>
    </div>
</template>

<script setup>
import Menu from "@/pages/index/Menu.vue";
import Carousel from "@/pages/index/Carousel.vue";
import Card from "@/pages/index/Card.vue";
import CarbonDioxide from "@/pages/node_data/CarbonDioxide.vue";
import IndoorTemperatureAndHumidity from "@/pages/node_data/IndoorTemperatureAndHumidity.vue";
import SoilTemperatureAndHumidity from "@/pages/node_data/SoilTemperatureAndHumidity.vue";
import Light from "@/pages/node_data/Light.vue";
import BladeTemperatureAndHumidity from "@/pages/node_data/BladeTemperatureAndHumidity.vue";
import PH from "@/pages/node_data/PH.vue";
import RainFall from "@/pages/node_data/RainFall.vue";
import WindSpeedAndDirection from "@/pages/node_data/WindSpeedAndDirection.vue";
import Conductivity from "@/pages/node_data/Conductivity.vue";
import NitrogenContent from "@/pages/node_data/NitrogenContent.vue";
import PhosphorusContent from "@/pages/node_data/PhosphorusContent.vue";
import PotassiumContent from "@/pages/node_data/PotassiumContent.vue";
import CameraPreview from "@/pages/camera/CameraPreview.vue";
import CloudManage from "@/pages/camera/FileManage.vue";

import {reactive} from 'vue'
import TaskManage from "@/pages/camera/TaskManage.vue";
import AboutUs from "@/pages/about_us/AboutUs.vue";

const state = reactive({content: 'index'})
</script>

<style scoped>

</style>